<script setup>
import * as Cesium from "cesium";
import { onMounted } from 'vue';
onMounted(async ()=>{
  var esri = new Cesium.ArcGisMapServerImageryProvider({
    url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
  })
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZDJkNDQwNS02NjkwLTRiMjUtYjIxOC1jNjYwYjU0NWMzMDkiLCJpZCI6MjM3OTc0LCJpYXQiOjE3MjQ5ODY3MTN9.GTM0REWfAJ0a_fmRVCrZNHYvNzxWgAjtw5mFK_n6yDs"
  const viewer = new Cesium.Viewer('cesiumContainer',{
    baseLayerPicker:false,
    imageryLayers:esri,
  });
  viewer.scene.setTerrain(
    new Cesium.Terrain(
      Cesium.CesiumTerrainProvider.fromIonAssetId(1),
    ),
  );
  viewer.camera.setView({
    destination:Cesium.Cartesian3.fromDegrees(116.39,39.91,2000),
    // destination:new Cesium.Cartesian3(1333597.291762958,-4667718.246269587,4147626.344790953),
    orientation:{
      heading:Cesium.Math.toRadians(0),
      pitch:Cesium.Math.toRadians(-90),
      roll:0.0
    }
  })
  const position = new Cesium.Cartesian3.fromDegrees(116.39,39.91,2000)
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll(-90,0,0));
  // const entity = viewer.entities.add({
  //   position,
  //   point:{
  //     pixelSize:100,
  //     color:Cesium.Color.RED
  //   }
  // })
  // const entity = viewer.entities.add({
  //   polyline:{
  //     show:true,
  //     positions:new Cesium.Cartesian3.fromDegreesArray([116.39,39.91,116.40,39.91]),
  //     width:10,
  //     material:new Cesium.Color(0,0,1,1)
  //   }
  // })
  const entity = viewer.entities.add({
    position,
    // plane:{
    //   plane:new Cesium.Plane(Cesium.Cartesian3.UNIT_Z,0.0),
    //   dimensions:new Cesium.Cartesian2(400,300),
    //   material:Cesium.Color.RED.withAlpha(0.5),
    //   outline:true,
    //   outlineColor:Cesium.Color.WHITE
    // }
    orientation,
    model:{
      uri:'../public/models/CesiumAir/Cesium_Air.glb',
      minimumPixelSize:100,
      maximumScale:10000,
      show:true
    }
  })
  viewer.trackedEntity = entity
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style scoped>
#cesiumContainer{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
